<script setup lang="ts">
import {computed, onBeforeMount, ref} from "vue";
import {getVipList} from "@/api/system/vip";
import {checkDiscount, convertVip, ECode} from "@/util/commonUtil";
import {userConfigStore} from "@/store/user/userConfigStore";
import PayWindow from '@/components/payWindow/index.vue'

const vipList = ref<any>([])

const userInfo: any = computed(() => userConfigStore().userInfo)
const productVO = ref<any>({})
const showPayWindow = ref<boolean>(false)
onBeforeMount(() => {
  getVipListData()
})

function getVipListData() {
  getVipList().then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      vipList.value = response.data.records
    }
  })
}

function buyVip(vipConfig: any) {
  productVO.value = convertVip(vipConfig);
  showPayWindow.value = true
}

function payCallback(paySuccess: any) {
  console.log("支付回调", paySuccess)
  showPayWindow.value = false
  // 支付成功后，打开页面刷新
  if (paySuccess) {
    setTimeout(function () {
      location.reload();
    }, 1000);
  }
}
</script>

<template>
  <section class="vip-main mt-6 mb-6">
    <a-row :gutter="[16,16]" class="w-full">
      <template v-for="vipConfig in vipList" :key="vipConfig.uid">
        <a-col :span="6">
          <div class="vipCard w-full relative"
               :style="{backgroundColor: vipConfig.vipExtraConfig.backgroundColor, color: vipConfig.vipExtraConfig.textColor}">
            <div class="img-gradient w-full flex items-center justify-center h-auto z-0"
                 :style="{backgroundImage: vipConfig.vipExtraConfig.backgroundImage, borderColor: vipConfig.vipExtraConfig.borderColor}">
              <div class="price relative flex flex-col justify-center">
                <div class="font-bold text-center p-1.5" style="font-size: 20px;"
                     :style="{color:vipConfig.vipExtraConfig.textColor}">{{ vipConfig.name }}
                </div>
                <div class="text-center font-bold" style="font-size: 22px;"
                     :style="{color:vipConfig.vipExtraConfig.textColor}">
                  <span class="real-price" v-if="vipConfig.chargeType === 3 && checkDiscount(vipConfig)">
                    <span v-if="vipConfig.payType === 2">
                          ¥{{ vipConfig.discountPrice / 100 }}
                    </span>
                    <span v-if="vipConfig.payType === 1">
                          {{ vipConfig.discountPrice }}积分
                    </span>
                  </span>
                  <span class="real-price" v-else>
                    <span v-if="vipConfig.payType === 2">
                      ¥{{ vipConfig.price / 100 }}
                    </span>
                    <span v-if="vipConfig.payType === 1">
                      {{ vipConfig.price }}积分
                    </span>
                  </span>
                </div>
                <span class="origin-price text-center"
                      :style="{color:vipConfig.vipExtraConfig.textColor}"
                      v-if="vipConfig.chargeType === 3 && checkDiscount(vipConfig)">
                  <del v-if="vipConfig.payType === 2">
                    ¥{{ vipConfig.price / 100 }}
                  </del>
                  <del v-if="vipConfig.payType === 1">
                    {{ vipConfig.price }}积分
                  </del>
                </span>
                <a-button class="btn mt-2.5" :disabled="userInfo.userTag === 15"
                          :style="{
                          backgroundColor: vipConfig.vipExtraConfig.buttonBackgroundColor,
                          color:vipConfig.vipExtraConfig.buttonTextColor,
                          borderColor: vipConfig.vipExtraConfig.buttonBackgroundColor}"
                          @click="buyVip(vipConfig)">
                  <span v-if="userInfo.userTag === 15">已成为终身会员</span>
                  <span v-else>升级会员</span>
                </a-button>
              </div>
            </div>

            <div class="gain-list mt-2.5">
              <div class="w-full justify-between gap-2" style="line-height: 28px; font-size: 12px;"
                   v-for="equityItem in vipConfig.vipExtraConfig.equityList">
                <a-row>
                  <a-col :span="12">
                    <div :style="{color: vipConfig.vipExtraConfig.equityTextColor}">{{ equityItem.name }}</div>
                  </a-col>
                  <a-col :span="12">
                    <!--对-->
                    <div role="img" aria-label="check-circle" class="anticon anticon-check-circle"
                         style="font-size: 14px; color: rgb(97, 203, 96); float: right"
                         v-if="equityItem.value === 'true'">
                      <svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em"
                           fill="currentColor" aria-hidden="true">
                        <path
                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
                      </svg>
                    </div>
                    <!--错-->
                    <div role="img" aria-label="check-circle" class="anticon anticon-check-circle"
                         style="font-size: 14px; color: rgb(231, 54, 19); float: right"
                         v-else-if="equityItem.value === 'false'">
                      <svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em"
                           fill="currentColor" aria-hidden="true">
                        <path
                            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"></path>
                      </svg>
                    </div>

                    <!--其它-->
                    <div class="font-semibold float-right"
                         :style="{color: vipConfig.vipExtraConfig.equityTextColor}" v-else>{{ equityItem.value }}
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </a-col>
      </template>
    </a-row>

    <!--支付窗口组件-->
    <PayWindow
        :show-pay-window="showPayWindow"
        :product="productVO"
        :resource-type="productVO.resourceType"
        @payCallback="payCallback"/>
  </section>
</template>

<style scoped lang="less">

.vipCard {
  padding: 16px 14px;
  border-radius: 16px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
}

.img-gradient {
  background-image: linear-gradient(to bottom, rgba(87, 81, 79, 0.5), rgba(85, 77, 73, 0.5), transparent);
  border: 1px solid #333;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  color: white;
  aspect-ratio: 1.3229308;
  transition: transform 0.3s ease;
}

.img-gradient:hover {
  transform: scale(1.05);
}

.vipCard .price {
  padding: 16px 14px;
}

.vipCard .price .origin-price {
  font-size: 12px;
}

.vipCard .price .btn {
  height: 44px;
  width: 180px;
  font-weight: 700;
  font-size: 18px;
  border-radius: 25px;
  transition: transform 0.3s ease;
}

.vipCard .price .btn:hover {
  transform: scale(1.1);
}

.vipCard .gain-list {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.vipDiv {
  margin-top: 40px;
  background-image: linear-gradient(to bottom, #e0edff, #fdfeff);
}
</style>
